<template>
	<div class="qualityContrast" v-loading="qualityContrastLoading">
		<div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="水站名称">
          <el-select v-model="searchForm.station" placeholder="为空则表示所有水站" :clearable="true">
            <p v-for="(item, index) of stationList" :key="index">
              <el-option :label="item" :value="item" se></el-option>
            </p>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" label-width="80px">
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.startTime"
              type="datetime"
              :clearable="false"
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择开始日期">
            </el-date-picker>
          </el-col>
          <el-col :span="2" class="line"> - </el-col>
          <el-col :span="11">
             <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              :clearable="false"
              style="width: 100%"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择结束日期">
            </el-date-picker>
          </el-col>
         
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit">确定</el-button>
          <!-- <el-button type="primary" class="greenBtn" size="mini">导出</el-button> -->
        </el-form-item>
      </el-form>

      <div class="title">水质变化情况分析图</div>
      <div class="chartBox"><charts :option="situationAnalysisLine"></charts></div>
    </div>
    <div class="pollutionChangeBox">
      <div class="title">污染因子变化分析表</div>
      <el-table :data="qualityContrastTable" size="small" border
        :header-cell-style="{color: '#292929', backgroundColor: '#f1f1f1', borderTop: '1px solid #EBEEF5'}"
      >
        <el-table-column
          prop="station"
          label="水站名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="improveFactor"
          label="污染改善因子"
          align="center">
          <template slot-scope="scope">
            {{scope.row.improveFactor || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="increaseFactor"
          label="污染加重因子"
          align="center">
          <template slot-scope="scope">
            {{scope.row.increaseFactor || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="stableFactor"
          label="稳定达标因子"
          align="center">
          <template slot-scope="scope">
            {{scope.row.stableFactor || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="overFactor"
          label="稳定超标因子"
          align="center">
          <template slot-scope="scope">
            {{scope.row.overFactor || '-'}}
          </template>
        </el-table-column>
        
      </el-table>
    </div>
	</div>
</template>
<script>
import charts from '../components/charts.vue'
import { mapActions, mapGetters } from 'vuex'
import common from '@/plugins/common'
import standard from '../plugins/standard'
export default {
  name: 'qualityContrast',
  data () {
    return {
      msg: 'hello qualityContrast!',
      qualityContrastLoading: false,
      searchForm: {
        station: '',
        startTime: '',
        endTime: '',
      },
      situationAnalysisLine: {},
      standard
		}
  },
  methods: {
    ...mapActions([
      'fetchQualityContrast'
    ]),
    async onSubmit() {
      this.qualityContrastLoading = true
      await this.fetchQualityContrast(this.searchForm)
      let xAxisType
      if(this.qualityContrastLine.length) {
        xAxisType = this.qualityContrastLine[0].type === '0' ?  '日期' : '时间 / d'
      }else {
        xAxisType = ''
      }
      this.situationAnalysisLine = {
        color: ['#615df5'],
        title: {
          text: '水质变化趋势',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 500
          }
        },
        xAxis: {
          type: 'category',
          name: xAxisType,
          data: this.qualityContrastLine.map(v => v.time),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          name: '污染指数',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: 污染指数为 {c}'
        },
        visualMap: {
          show: false,
          pieces: [
            { max: 1, min: 0, color: '#615df5' }
          ],
          outOfRange: {
            color: '#ff343e'
          }
        },
        series: 
          {
            name: this.searchForm.station,
            data: this.qualityContrastLine.map(v => v.result),
            type: 'line',
            smooth: true,
             markLine: {
              symbol: ['none'],
              label: {
                formatter: '{b}: {c}'
              },
              lineStyle: {
                color: '#e86464'
              },
              data: [
                {yAxis: standard.pollutionIndex, name: '超标线'}
              ]
            },
          },
      }

      this.qualityContrastLoading = false
    },
  },
  created() {
    // this.searchForm.station = this.stationList ? this.stationList[0] : '沙江4#'
    this.searchForm.startTime = common.changeDateToString(new Date(new Date().getTime() - 2592000000)) + ' 00:00:00'
    this.searchForm.endTime = common.changeDateToString(new Date()) + ' 00:00:00'
    this.onSubmit()
  },
  mounted() {
    
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      qualityContrastLine: 'getQualityContrastLine',
      qualityContrastTable: 'getQualityContrastTable',
    })
  },
  components: {
    charts
  }
}
</script>
<style scoped>
.title {
  position: relative;
  line-height: 70px;
  font-size: 16px;
}
.title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  padding: 20px;
}
.searchBox .line {
  text-align: center;
}
.searchBox .title {
  left: 15px;
}
.searchBox .chartBox {
  width: 100%;
  height: 350px;
}

.pollutionChangeBox {
  background: #fff;
  padding: 0 20px 20px 20px;
  margin-top: 15px;
}
.pollutionChangeBox .title {
  left: 15px;
}

</style>